<template>
	<view class="pay-item flex-row flex-items-center flex-between">
		<view class="flex-row flex-items-center" style="margin-left: 16px;">
			<image src="../../static/amount.png" style="width: 36px; height: 36px;"></image>
			<view class="flex-column" style="margin-left: 16px;">
				<text class="font-14 font-weight-regular pay-item-main-color">链上支付</text>
<!--				<view class="flex-row flex-items-end">-->
<!--					<text class="pay-item-text_medium">{{payStatus === 1 ? usdtAmount : spxAmount}}</text>-->
<!--					<text class="pay-item-text"> {{payStatus === 1 ? 'USDT' : 'SPX'}}</text>-->
<!--				</view>-->
			</view>
		</view>
		<image :src="'/static/selected.png'" style="width: 16px; height: 16px; margin-right: 16px;"></image>
	</view>
</template>

<script>
	import {getBalance} from "../../api";

  export default {
		name: "pay-item",
    props: {
      payStatus: {
        type: Number,
        default: () => {}
      },
    },
    mounted() {
      // this.getBalance_()
    },
		data() {
			return {
        spxAmount: 0,
        usdtAmount: 0,
			};
		},
		methods: {
      getBalance_() {
        getBalance().then((data) => {
          this.spxAmount = data.spxAmount
          this.usdtAmount = data.usdtAmount
        }).catch((res) => {})
      },
		}
	}
</script>

<style>
	.pay-item {
		border-radius: 12px;
		border: 1px solid #EFF0F4; 
		height: 70px;
	}
	.pay-item-main-color {
		color: #313C56;
	}
	.pay-item-text {
		color: #6B7885;
		font-size: 14px;
		font-weight: 400;
		margin-bottom: 4px;
		margin-left: 4px;
	}
	.pay-item-text_medium {
		color: #313C56;
		font-size: 24px;
		font-weight: 500;
	}
</style>